PM 說: 要怎麼在手機上監聽前端 console 以及 API 資訊?

2024 iThome 鐵人賽

DAY 13

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 13 篇

16th鐵人賽

YUAN

2024-09-10 21:37:05

185 瀏覽

分享至

前言

這幾天想要來介紹跟📱應用上比較相關的demo
不知道讀者們有沒有聽過微信小程序,LIFF,PWA
其實上述三個本質都是網頁(都是前端技術)
只是跑在不同的環境上，現在很多手機App都是利用前端技術開發的~

當工程師開發的前端應用跑在手機上要debug就相對麻煩
(當然可以透過接線連接手機去監聽，可是還是不夠便利)

今天來簡單介紹一個好用套件叫做vConsole
https://github.com/Tencent/vConsole

關於vConsole

文件:
https://github.com/Tencent/vConsole/blob/dev/doc/public_properties_methods.md#vconsoleoption

這邊列出6個特色

將console收集起來

如封面圖左上
js常用的console都會被記錄起來~

      //日志
      console.log("foo"); // 白底黑字
      console.info("bar"); // 白底紫字
      console.debug("oh"); // 白底黄字
      console.warn("foo"); // 黄底黄字
      console.error("bar"); // 红底红字

展開物件{},陣列[]等資料

如封面圖中上
就如同瀏覽器的控制面板，能展開資料做進一步的檢查

獨立一區做System Log

如封面圖右上
因為console太多重要資訊會被洗掉，有了這個功能可以把重要log集中在一起

      // 'foo' 輸出到 System 面板
      console.log('[system]', 'foo');

監控Storage

如封面圖左下
瀏覽器儲存區也可以監聽，在多數情況支援儲存區地修改

Cookie
LocalStorage
SessionStorage

監控Element

如封面圖中下
如同瀏覽器的檢查，可以查看元素DOM

監控Network

如封面圖右下
可以監聽XMLHttpRequest, Fetch, sendBeacon
當前端有能力監聽Request就能減少後端工程師寫一堆LOG找bug的情況發生

sendBeacon 比較少聽到，在之前的文章PM 說: 要怎麼防止用戶沒存檔手滑關閉網頁?中有提到網頁生命週期

sendBeacon 通常是用在網頁unload,visibilitychange時發送數據到後端做統計用的
之後有機會再整理一篇文章

參考:
https://juejin.cn/post/7280783758618755108

demo

vConseol 超簡易demo

很推薦想使用這個套件的讀者去玩玩官方的範例

本日demo的程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vConsole 簡易demo</title>
  </head>
  <body>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <script>
      const vConsole = new VConsole({ theme: "dark" });

      //日志
      console.log("foo"); // 白底黑字
      console.info("bar"); // 白底紫字
      console.debug("oh"); // 白底黄字
      console.warn("foo"); // 黄底黄字
      console.error("bar"); // 红底红字

      // 'foo' 輸出到 System 面板
      console.log("[system]", "foo");
    </script>
  </body>
</html>